5

JavascriptからAngularjsを制御したかったのですが、うまくいきませんでした。どのように変更したらよいでしょうか?

手動で「ま」を入力すると動くのですが、jsで「ま」を入力しても動きませんでした。

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
    <meta charset="UTF-8">
    <title>javascript⇒angularjs</title>
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    <script>
    var mainCtrl = function($scope) {
        $scope.users = [
            {"name":"ここから"},
            {"name":"はじまる"},
            {"name":"まいれぼりゅーしょん"},
        ];
    }
    </script>
</head>
<body>
    <h1>Javascript⇒Angularjs</h1>
    <div ng-controller="mainCtrl">
    <p><input type="text" id="serch" ng-model="query" ></p>
    <ul>
    <li ng-repeat="user in users|filter:query|limitTo:3">
    {{user.name}}
    </li>
    </ul>
    </div>
    <button type="button" onclick="masao()">「ま」を入力</button>
    <script>
      function masao(){
        document.getElementById('serch').value="ま";
      }
    </script>
</body>
</html>

1 件の回答 1

4

ng-clickを使うと動きます。

例:

var mainCtrl = function($scope) {
        $scope.users = [
            {"name":"ここから"},
            {"name":"はじまる"},
            {"name":"まいれぼりゅーしょん"},
        ];

        $scope.setQuery = function(q)
        {
            $scope.query = q;
        }
    }

HTML

<div ng-controller="mainCtrl">
    <p><input type="text" id="serch" ng-model="query" ></p>
    <ul>
      <li ng-repeat="user in users|filter:query|limitTo:3">
       {{user.name}}
     </li>
    </ul>
    <button type="button" ng-click="setQuery('ま')">「ま」を入力</button>
</div>

button$scope使うので、mainCtrlの中にあるのは必要です。

(日本語があまり上手じゃないので、すみません)

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。