Access "calling scope" and strange behaviour

Question

I have a simple snippet of code :

using ContactTypesNamespace;

function SomeCtrl($scope) {
  $scope.modify = function(value) {
    $scope.something = "Hello";
  };
}

Does anyone can explain how I could change it so the modify() function only change the textfields inside the scope of the button I click ?

I also don't get why only the text fields which have not been edited are modified by the function.

Thank you very much

Answer 1

这是因为ng-repeat创建了它自己的范围。使用原型继承。通过声明ng-model，您将在该新范围上创建一个新字段。

但这对你想要做的事情有用。

 <div ng-repeat="toto in [1,2,4,5]" ng-init="something = {}">
      <input ng-model="something.hi" />
      <input ng-model="something.hi" />
      <button ng-click="modify(something)">Modify</button>
    </div>
  </body>

.controller('ctrl', function ($scope) {
  $scope.modify = function (something) {
    something.hi = "hello";
  }
})

Answer 2

在这种情况下，你只是在屏幕上推出相同的信息，同时将所有内容绑定到同一个变量。您只需创建数组并将每个输入行绑定到适当的数组元素即可。并且通过按“修改”按钮，传递参数，必须改变巫元素元素。

 function SomeCtrl($scope) {
  $scope.something = [];
      $scope.modify = function(toto) {
        $scope.something[toto] = toto;
      };
    }

   

 

         

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
        <div ng-app>
          <div ng-controller="SomeCtrl">
            <div ng-repeat="toto in [1,2,4,5]">
              <input ng-model="something[toto]" />
              <input ng-model="something[toto]" />
              <button ng-click="modify(toto)">Modify</button>
            </div>
          </div>
        
        </div>