angular.js - AngularJS problems using ng-model within ng-repeat
ringa_lee
ringa_lee 2017-05-15 16:52:42
0
4
572

fiddle link: http://jsfiddle.net/08tox9k4/

<html ng-app = 'test'>
<head></head>
<body ng-controller = 'testCtrl'>   
    <p ng-repeat="qq in obj.qqs">
      <input class="qq" ng-model="obj.qqs[$index]" placeholder="请输入">;
    </p>
    <script src="angular.min.js"></script>
    <script type="text/javascript">
        angular.module('test',[])
            .controller('testCtrl', ['$scope', function($scope){
                $scope.obj = {
                    qqs: ["12345","23456"]
                };
            }]);
    </script>
</body>
</html>

Problem: When modifying a value in the generated input tag, the mouse focus is lost every time a digit is modified. This may be because the view is refreshed by the change in data.
How can I completely modify the value in the input? Then save the changes through the save button or something?
Or how to temporarily cancel monitoring of variables?

ringa_lee
ringa_lee

ringa_lee

reply all(4)
滿天的星座

Have some questions:
1. ng-model="obj.qqs[$index]" should be ng-model="qq" This can solve the problem of focus disappearing.
2. Generally, primitive type variables are not used as ng-model. Literal object can be used here.

["12345","23456"] => [{val: "12345"}, {val: "23456"}]

Then ng-model must also be modified to qq.val
3. How to save through the button, just use ng-click.
4. Style issue. Use 'controller as ctrl' syntax to avoid using $scope inside the controller. See the sample below for details

Working sample: http://jsfiddle.net/wfh04vhc/

过去多啦不再A梦

Detailed explanation of using ng-model under AngularJS ng-repeat: link description

黄舟

Just ng-model="qq" and that’s it

滿天的星座

http://www.lovelucy.info/understanding-scopes-in-angularjs.html

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template