Question

我有一个表（html），里面填充了AngularJS提供的一些数据。现在我想更改范围内每个条目的特定属性。如何访问和操作范围中元组的特定属性？

我尝试过如下面的JavaScript代码所示。这一切都运行良好，直到警报弹出。警报$scope.selects.day = 'Superhero';下方的代码无效。这里的问题是什么？

HTML表格：

<select name="manipulate" onchange="change()">
    <option value"doSomething">Do Something</option>
    <option value"doSomethingElse">Do Something else</option>
</select>

<table>
    <tbody>
        <tr ng-repeat="select in selects | filter:model">
            <td>{{select.day}}</td>
            <td>{{select.subcategory}}</td>
        </tr>
    </tbody>

Angular JS：

var myApp = angular.module('myApp', ['ui.filters']);
myApp.controller('controller', function($scope) {

var content = [ 
    {subcategory: 'XYZ',day: 'Monday',},
    {subcategory: 'ABC',day: 'Tuesday',},
];

$scope.selects = content
});

Java脚本：

function change() {
    var appElement = document.querySelector('[ng-app=myApp]');
    var $scope = angular.element(appElement).scope();

    $scope.$apply(function() {

    //alert('Works until here')
    $scope.selects.day = 'Superhero';

    });
}

Answer 1

你要做的是非常错误，你不应该出于任何原因这样做。如果你想添加额外的js文件请使用import和export，这里有一些文档，它很大，所以我不会介绍那部分，但是这里有很多答案（stackoverflow）：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

要修复您的代码，首先您会忽略他们缺少的选项字段value=：

<option value="doSomething">Do Something</option>
<option value="doSomethingElse">Do Something else</option>

其次，我不知道什么过滤器：模型这样做我将删除该部分，你需要使用angularjs ng-change而不是javascript onchange：

<select name="manipulate" ng-model="someModel" ng-change="change()">

创建更改函数，该函数将循环遍历$ scope上的所有选项属性并更改'day'属性的值。

function change() {
  $scope.selects = $scope.selects.map(val => {
    val.day = "Superhero"
    return val;
  });
}

最后放置更改功能并选择$ scope：

angular.extend($scope, {
  selects: content,
  change,
})

此外，无需手动触发摘要周期，因为angularjs会为您执行此操作，因此请尽量避免使用。

一切都在这里： https://jsfiddle.net/pegla/r6Ly8j8L/1/

如何使用外部JS操纵AngularJS范围属性

1 个答案: